<!DOCTYPE html>
<html lang="en">
<head>
    <title>Remoku: Simple</title>
	<meta charset="utf-8" />
	<meta name="generator" content="EverEdit" />
	<meta name="author"	content="A. Cassidy Napoli" />
	<meta name="keywords" content="Web, Roku, Remote" />
	<meta name="description" content="Remoku:Simple contains the minimum necessary code for functionality"	/>
    <meta name="viewport" content="width=device-width, initial-scale=1.4, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-startup-image" href="http://remoku.tv/remoku-splash.png" />
	<link rel="apple-touch-icon-precomposed" href="http://remoku.tv/apple-touch-icon-precomposed.png" />
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://remoku.tv/apple-touch-icon-ipad-precomposed.png" />
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://remoku.tv/apple-touch-icon-iphone4-precomposed.png" />
    <meta name="MobileOptimized" content="220" />
	<link rel="icon" type="image/png" href="http://remoku.tv/favicon.png">
<style>
	html{
		margin:0;padding:0;
		width:220px;
	}

	body{
		color:white;
		background: #000000;
		width:220px;
		text-align: center;
		margin:0;padding-left:8px;
	}
	a{
		color:white;
		text-decoration: none;
	}
	
	#address, #textinput{
		width:100px;
		background-color:#696969;
		color:white;
		-webkit-appearance: none;
		border-radius: 0;
	}
	
	#remoteTable{
		text-align: center;
	}

	input[type="button"]{
		vertical-align: middle;
		width:50px;
		height:30px;
		border:0;
		background-color:#696969;
		color:white;
		-webkit-appearance: none;
		border-radius: 0;
		font-family: monospace;
	}

	#transportRow input{
		margin-top:10px;
	}
	
	#doPostForm, #postframe{
		visibility:hidden;
		width:0;
		height:0;
	}
	
@media handheld{
		input[type="button"]{
			overflow: visible;
			padding-top:8px;
			margin:0;
			border:0;
			background-color:#696969;
			color:white;
		}
}
</style>
<script type='application/javascript' src='fastclick.js'></script>
<script>

if (!Element.prototype.addEventListener) {
  var oListeners = {};
  function runListeners(oEvent) {
    if (!oEvent) { oEvent = window.event; }
    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
      if (oEvtListeners.aEls[iElId] === this) {
        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
        break;
      }
    }
  }
  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
    if (oListeners.hasOwnProperty(sEventType)) {
      var oEvtListeners = oListeners[sEventType];
      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
      }
      if (nElIdx === -1) {
        oEvtListeners.aEls.push(this);
        oEvtListeners.aEvts.push([fListener]);
        this["on" + sEventType] = runListeners;
      } else {
        var aElListeners = oEvtListeners.aEvts[nElIdx];
        if (this["on" + sEventType] !== runListeners) {
          aElListeners.splice(0);
          this["on" + sEventType] = runListeners;
        }
        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
          if (aElListeners[iLstId] === fListener) { return; }
        }     
        aElListeners.push(fListener);
      }
    } else {
      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
      this["on" + sEventType] = runListeners;
    }
  };
  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
    if (!oListeners.hasOwnProperty(sEventType)) { return; }
    var oEvtListeners = oListeners[sEventType];
    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
    }
    if (nElIdx === -1) { return; }
    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
    }
  };
}

	function createCookie(name, value, days) {
		var expires;
		if (days) {
			var date = new Date();
			date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
			expires = "; expires=" + date.toGMTString();
		} else expires = "";
		document.cookie = name + "=" + value + expires + "; path=/";
	}

	function readCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for (var i = 0; i < ca.length; i++) {
			var c = ca[i];
			while (c.charAt(0) == ' ') c = c.substring(1, c.length);
			if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
		}
		return null;
	}

	function eraseCookie(name) {
		createCookie(name, "", -1);
	}

	function updateAddress(newAddress){
		createCookie('SimpleAddress',newAddress,365);
	}
	

	function checkEnter(event){
		if (event.keyCode==13) {
        	doText();
    	}
	}

	function doText(){
		var text = document.getElementById("textinput").value;
		if(text.length>1){
			var character = text.slice(0,1);
			document.getElementById("textinput").value = text.slice(1,text.length);
			//NOTE NOTE NOTE
			//encodeURIComponent doesn't encode -_.!~*'()
			doSubmit("Lit_" + encodeURIComponent(character));
			setTimeout(function(){
				doText();
				},
			250);
		} else if(text.length==1){
			doSubmit("Lit_" + encodeURIComponent(text));
			document.getElementById("textinput").value = "Type here";
		} else {
			document.getElementById("textinput").value = "Type here";
		}
	}
	
	function doSubmit(command){
		if (command=="OK"){command="Select"};
		if (command=="Replay"){command="InstantReplay"};
		document.getElementById("doPostForm").action = "http://" + document.getElementById("address").value + ":8060/keypress/" + command;
		document.getElementById("doPostForm").submit();
		return false;
	}

	if (typeof document.ontouchmove !=="undefined") {
		document.ontouchmove = function(e){ 
    		e.preventDefault(); 
		}
	}

	window.addEventListener('load', function() {
    	FastClick.attach(document.body);
	}, false);
	
	if (window.screen.height==568) { // iPhone with 4 inch screen workaround for letterboxed home screen web app
		document.querySelector("meta[name=viewport]").content="width=320.1, initial-scale=1.4, user-scalable=no";
	}
</script>
</head>
<body>
	<label for="address">Address</label><input id="address" name="address" type="text" value="192.168.1.15" onchange="updateAddress(this.value);" />
	<table id="remoteTable">
		<tr>
			<td>
				<input type="button" value="Back" onclick="doSubmit(this.value);"/>
			</td>
			<td></td>
			<td>
				<input  type="button" value="Home" onclick="doSubmit(this.value);"/>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<input  type="button" value="Up" onclick="doSubmit(this.value);"/>
			</td>
			<td></td>
		</tr>
		<tr>
			<td>
				<input  type="button" value="Left" onclick="doSubmit(this.value);"/>
			</td>
			<td>
				<input  type="button" value="OK" onclick="doSubmit(this.value);"/>
			</td>
			<td>
				<input  type="button" value="Right" onclick="doSubmit(this.value);"/>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<input  type="button" value="Down" onclick="doSubmit(this.value);"/>
			</td>
			<td></td>
		</tr>
		<tr>
			<td>
				<input  type="button" value="Replay" onclick="doSubmit(this.value);"/>
			</td>
			<td></td>
			<td>
				<input  type="button" value="Info" onclick="doSubmit(this.value);"/>
			</td>
		</tr>
		<tr id="transportRow">
			<td>
				<input  type="button" value="Rev" onclick="doSubmit(this.value);"/>
			</td>
			<td>
				<input  type="button" value="Play" onclick="doSubmit(this.value);"/>
			</td>
			<td>
				<input  type="button" value="Fwd" onclick="doSubmit(this.value);"/>
			</td>
		</tr>
	</table>
	<label for="textinput">Text</label>
	<input name="textinput" id="textinput" value="Type here" onkeydown="checkEnter(event);" onfocus="if(this.value=='Type here')this.value='';" onblur="if(this.value=='')this.value= 'Type here';" />
	<input id="sendBtn" type="button" onclick="doText();" value="Send"/>
	<form id="doPostForm" action="" method="post" target="postframe"></form>
	<iframe name="postframe" id="postframe" src="about:blank"></iframe>
	<script>
	document.getElementById("address").value = readCookie("SimpleAddress") ? readCookie("SimpleAddress") : "192.168.1.15";
	</script>
</body>
</html>
